<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./common.css">
    <style>
        .banner
        {
            height: 285px;
            background: url(../image/网易轮播背景图.jpg);
            background-size: 1600px;
        }
        
        .banner .area
        {
            position: relative;
            display: flex;
            align-items: center;
            justify-content:space-between;
            width: 984px;
            height: 285px;
            /* background-color: red; */
        }

        .area .left
        {
           
             position: relative;
             width: 730px;
             height: 285px;
             /* overflow: hidden; */
        }

        

        .area .left .list li
        {
            width: 730px;
            height: 285px;
           
            background-image: url(../image/轮播图.jpg);
            background-size: cover;
        } 
        
        .area .left .docs
        {
            position: absolute;
            display: flex;
            justify-content: center;
            height: 20px;
            left: 0px;
            right: 0;
            bottom: 0;
            margin: 0 auto;
            
        } 


        .area .control
        {
             width: 37px;
             height: 63px;
             position: absolute;
        }

        .area .control-left
        {
            left: -70px;
            background-image: url(../image/banner.png);
            background-position: 0px -360px;
        }

         .area .control-left:hover
         {
            background-position: 0 -430px;
         }

        .area .control-right
        {
            right: -70px;
             background-image: url(../image/banner.png);
            background-position: 0px -508px;
        }

          .area .control-right:hover
          {
            background-position: 0 -578px;
          }

        .docs .point
        {
             background-image: url(../image/banner.png);
             background-position: 3px -343px;
            background-repeat: no-repeat;
             width: 20px;
             height: 20px;
        }
        
         .docs .point:hover
         {
              background-position: -16px -343px;
         }

       .area .right
       {
         display: flex;
         width: 254px;
         height: 285px;
         background-color: red;
       }

       .area .right li
       {
          width: 254px;
          height: 285px;
          background: url(../image/网易下载客户端.png);
          background-size: cover;
       }

       


    </style>
</head>
<body>
    <div class="banner">
      <a href="#">
          <div class="area">
            <div class="left">
              <ul class="list">
                <li></li>
              </ul>
             <ul class="docs">
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
                <li class="point"></li>
             </ul>
            </div>
            <div class="right">
                <ul>
                    <li></li>
                </ul>
            </div>
            <div class="control control-left"> </div>
            <div class="control control-right"></div>
        </div>
      </a>
    </div>
</body>
</html>